<template>
    <div class="login-box">
      <el-form ref="loginFormRef"
               :model="loginForm"
               status-icon
               :rules="loginFormRule"
               label-width="70px"
               class="login-form">
        <h2>SpringRBAC</h2>
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="loginForm.userName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="loginForm.password" type="password" autocomplete="off"/>
        </el-form-item>
        <el-form-item>
          <el-button class="login-button" type="primary" @click="doLogin(loginFormRef as FormInstance)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {FormInstance, FormRules} from "element-plus";
import {login} from "../api/authentication.ts";
import {Router, useRouter} from "vue-router";
import {getMenu} from "../api/menu.ts";
import {MenuTree} from "../type/MenuTree.ts";

const loginFormRef = ref<FormInstance>()

const loginForm = reactive({
  userId: 0,
  userName: 'JamesTang',
  password: '252566',
  email: ''
})

// Form input check
const loginFormRule: FormRules =  {
  userName: [
    {
      required: true,
      message: 'Please input username',
      trigger: 'blur'
    },
    {
      min: 3,
      max: 10,
      message: 'Wrong length',
      trigger: 'blur'
    }
  ],

  password: [
    {
      required: true,
      message: 'Please input username',
      trigger: 'blur'
    },
    {
      min: 3,
      max: 32,
      message: 'Wrong length',
      trigger: 'blur'
    }
  ]
}

const router: Router = useRouter()

function doLogin(formRef: FormInstance | undefined){

  if (!formRef) return;

  formRef.validate( async (valid) => {

    if (valid) {
      const loginResponse = await login(loginForm)

      const token = 'Bearer ' + loginResponse.data
      localStorage.setItem('Authorization', token)

      if (localStorage.getItem('Authorization')) {


        sessionStorage.setItem('isLogin', 'true')
      }

      const getMenuResponse = await getMenu()

      if (!getMenuResponse.data){
        return
      }
      sessionStorage.setItem('menu', JSON.stringify(buildMenuTree(getMenuResponse.data)))



      await router.push('/')
    }
  })
}

function buildMenuTree(rawDataArray: MenuTree[], parentId?: number): MenuTree[]{

  const tree: MenuTree[] = []

  for (const menuData of rawDataArray) {

    if (menuData.parentId == parentId) {
      const children = buildMenuTree(rawDataArray, menuData.menuId)
      if (children.length) {
        menuData.children = children
      }
      tree.push(menuData)
    }
  }



  return tree
}

</script>

<style lang='scss' scoped>

.login-box{
  width: 100%;
  height: 100%;
  background: url(../assets/loginBackground.png);
  padding: 1px;
  text-align: center;

  .login-form{
    width: 500px;
    margin: 200px auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 20px;

    .login-button{
      width: 33%;
      margin-left: 26%;
      margin-right: 33%;
    }
    h2{
      margin-bottom: 5px;
    }
  }
}
</style>